<template>
  <div class="m-block">
    <div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
      <div class="widget am-cf">
        <div class="widget-head am-cf">
          <div class="widget-title am-fl">网报排行榜</div>
        </div>
        <div class="widget-body  am-fr">
          <multiple-toolbar ref="toolbar"  class="toolbar" @search="handleFind" needGradeSearch
                            areaTeam  allperiod grade needAllPeriod
          ></multiple-toolbar>
          <!-- :needInitSearch="false" -->
          <div class="am-u-sm-12">
            <el-button-group>
              <el-button @click="active = 0;tableData = busTeamOnlineData" size="big" :class="{'el-button el-button--primary': active === 0}">
                业务组
              </el-button>
              <el-button @click="active = 1;tableData = gradeOnlineData" size="big" :class="{'el-button el-button--primary': active === 1}">
                年级
              </el-button>
              <el-button @click="active = 2;tableData = subjectOnlineData" size="big" :class="{'el-button el-button--primary': active === 2}">
                科目
              </el-button>
            </el-button-group>
          </div>
          <div class="am-u-sm-12 am-form-group">
            <el-button size="small" type="success" @click="handleExport">
              <span class="am-icon-download"></span>&nbsp;&nbsp;导出</el-button>
          </div>


            <div v-show="active === 0" class="am-u-sm-12 am-form-group">
              <el-table
                :data="busTeamOnlineData"
                border
                :summary-method="getSummaries"
                :show-summary="true"
                empty-text="暂无数据"
                stripe
                style="min-width: 100%">
                <el-table-column
                  prop="areaTeamName"
                  min-width="160"
                  label="区域">
                </el-table-column>
                <el-table-column
                  prop="busTeamName"
                  min-width="120"
                  label="业务组">
                </el-table-column>
                <el-table-column
                  prop="totalBranchNum"
                  min-width="120"
                  label="总科数">
                </el-table-column>
                <el-table-column
                  prop="onlineBranchNum"
                  min-width="120"
                  label="网报科数">
                </el-table-column>
                <el-table-column
                  min-width="160"
                  label="网报科数占比">
                  <template scope="scope">
                    <div>{{scope.row.onlineBranchNum ==null || scope.row.totalBranchNum==null || scope.row.totalBranchNum == '0' ? '0%' :
                      (parseInt(scope.row.onlineBranchNum)/ parseInt(scope.row.totalBranchNum))*100 | formatNumber(2)}}%</div>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>

            <div v-show="active === 1" class="am-u-sm-12 am-form-group">
              <el-table
                :data="gradeOnlineData"
                border
                :summary-method="getSummaries"
                :show-summary="true"
                empty-text="暂无数据"
                stripe
                style="min-width: 100%">
                <el-table-column
                  prop="areaTeamName"
                  min-width="160"
                  label="区域">
                </el-table-column>
                <el-table-column
                  prop="gradeName"
                  min-width="120"
                  label="年级">
                </el-table-column>
                <el-table-column
                  prop="totalBranchNum"
                  min-width="120"
                  label="总科数">
                </el-table-column>
                <el-table-column
                  prop="onlineBranchNum"
                  min-width="120"
                  label="网报科数">
                </el-table-column>
                <el-table-column
                  min-width="160"
                  label="网报科数占比">
                  <template scope="scope">
                    <div>{{scope.row.onlineBranchNum ==null || scope.row.totalBranchNum==null || scope.row.totalBranchNum == '0' ? '0%' :
                      (parseInt(scope.row.onlineBranchNum)/ parseInt(scope.row.totalBranchNum))*100 | formatNumber(2)}}%</div>
                  </template>
                </el-table-column>


              </el-table>
            </div>


            <div  v-show="active === 2" class="am-u-sm-12 am-form-group">
              <el-table
                :data="subjectOnlineData"
                border
                :summary-method="getSummaries"
                :show-summary="true"
                empty-text="暂无数据"
                stripe
                style="min-width: 100%">
                <el-table-column
                  prop="areaTeamName"
                  min-width="160"
                  label="区域">
                </el-table-column>
                <el-table-column
                  prop="subjectName"
                  min-width="120"
                  label="科目">
                </el-table-column>
                <el-table-column
                  prop="totalBranchNum"
                  min-width="120"
                  label="总科数">
                </el-table-column>
                <el-table-column
                  prop="onlineBranchNum"
                  min-width="120"
                  label="网报科数">
                </el-table-column>
                <el-table-column
                  min-width="160"
                  label="网报科数占比">
                  <template scope="scope">
                    <div>{{scope.row.onlineBranchNum ==null || scope.row.totalBranchNum==null || scope.row.totalBranchNum == '0' ? '0%' :
                      (parseInt(scope.row.onlineBranchNum)/ parseInt(scope.row.totalBranchNum))*100 | formatNumber(2)}}%</div>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>

        <div class="am-u-lg-12 am-cf">
          <div class="am-fr">
            <pagination v-bind:total="total" v-bind:pageNo="pageNo" v-bind:pageSize="pageSize"
                        @paging="loadTableData"/>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>
<script>
  import io from '../../lib/io'
  import MultipleToolbar from './MultipleToolbar.vue'
  import Pagination from '../base/Pagination.vue'
  import moment from 'moment'

  export default{
    data:function(){
      return {
        total: 0,
        pageSize: 10,
        pageNo: 1,
        active: 0,
        tableData: [],
        busTeamOnlineData: [],
        gradeOnlineData: [],
        subjectOnlineData: [],

      }
    },
    components: {
      MultipleToolbar, Pagination
    },
    watch: {

    },
    computed: {

    },
    mounted :function(){
      $(window).smoothScroll()
//      this.loadTableData()
    },
    methods:{
      // 计算合计百分比
      getSummaries(param){
        const { columns, data } = param;
        const sums = [];
        let  divider, dividend;
        let length = columns.length;
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = '合计';
            return;
          }
          const values = data.map(item => Number(item[column.property]));
          //验证每个value值是否是数字，如果是执行if
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              return prev + curr;
            }, 0);

            if(divider == undefined){
              divider = sums[index];
            }else{
              dividend = sums[index];
            }

          } else {
            sums[index] = '';
          }
        });
        
        if(divider == 0 || dividend == 0){
          sums[length - 1] = 0.00 + '%';
        }else{
          if(divider <= dividend){
            sums[length - 1] = (divider / dividend * 100).toFixed(2) + '%';
          }else{
            sums[length - 1] = (dividend / divider * 100).toFixed(2) + '%';
          }
        }
        
        
        return sums;
      },
      handleFind() {
        this.loadTableData(1)
      },
      handleDetail(counselorRegDetailList) {
        this.$refs.consultantDetail.show()
        this.$refs.consultantDetail.tableData = counselorRegDetailList || []
      },
      handleExport() {
        var _this = this

        io.downloadFile(io.exportOnlineList, this.formatData(), function (ret) {
          if (ret.success) {
          } else {
            _this.$alert(ret.desc)
          }
        })
      },
      loadTableData: function (pageNo) {
        var _this = this
        _this.pageNo = pageNo || _this.pageNo || 1

        this.$showLoading()
        io.post(io.findOnlineList, Object.assign({}, {
          pageNo: _this.pageNo,
          pageSize: _this.pageSize
        }, this.formatData()), function (ret) {
          _this.$hiddenLoading()
          if (ret.success) {
            _this.total = ret.data.total
            _this.busTeamOnlineData = ret.data.busTeamOnlineData
            _this.gradeOnlineData = ret.data.gradeOnlineData
            _this.subjectOnlineData = ret.data.subjectOnlineData
            _this.tableData = _this.busTeamOnlineData
          } else {
            _this.$alert(ret.desc)
          }
        })
      },
      formatResult(data) {
        let obj = {}
        data.map(val => {
          if (!obj[val.periodName]) {
            let arr = []
            arr.push(val)
            obj[val.periodName] = arr
          } else {
            obj[val.periodName].push(val)
          }
        })
//        Object.keys(obj).map(val => {
//          obj[val].map(i => {
//
//          })
//        })
        return obj
      },
      formatData() {
        let toolbar = this.$refs.toolbar
        let busTeamIds = [],periodIds = [], gradeIds = []
        if(toolbar.formData.busTeamIds.length === 0) {
          toolbar.busTeams.map(val => {
            busTeamIds.push(val.busTeamId)
          })
        } else {
          busTeamIds = toolbar.formData.busTeamIds
        }
        if(toolbar.formData.periodIds.length === 0) {
          toolbar.periods.map(val => {
            periodIds.push(val.periodId)
          })
        } else {
          periodIds = toolbar.formData.periodIds
        }
        if(toolbar.formData.gradeIds.length === 0) {
          toolbar.grades.map(val => {
            if (val.value) {
              gradeIds.push(val.value)
            }
          })
        } else {
          gradeIds = toolbar.formData.gradeIds
        }
        return {
          areaTeamId: toolbar.formData.areaTeamId,
          busTeamIds: '',
          periodIds: periodIds.join(','),
          gradeIds: gradeIds.join(','),
        }
      }
    }
  }
</script>
<style lang="less">
  .m-block {
    .el-button-group {
      margin: 0 auto;
      display: table;
      padding-bottom: 15px;
      border-bottom: 1px dashed #ddd;
    }
    h2 {
      text-align: center;
      font-weight: normal;
      margin-bottom: 5px;
    }
    .el-table__footer-wrapper tbody td, .el-table__header-wrapper tbody td {
      color: #333;
    }
  }
</style>
